<template>
  <div class="top-nav">
    <div class="top-nav-list">
      <ul>
        <!-- 判断用户是否登录 -->
        <li v-if="form !== null">
          <a @click="exit" href="#">退出登录</a>
        </li>
        <li v-else>
          <a href="#">
            <router-link to="/">登录</router-link>
          </a>
        </li>
        <li>
          <a href="#">修改密码</a>
        </li>
        <li>
          <a href="#">商品分类</a>
        </li>
        <li>
          <a href="#">收藏夹</a>
        </li>
        <li>
          <a @click="goCart" href="#">购物车</a>
        </li>
        <li>
          <a href="#">我的订单</a>
        </li>
        <li>
          <a @click="dialog = true" href="#">个人信息</a>
        </li>
        <li>
          <a href="#"><router-link to="/home">首页</router-link></a>
        </li>
      </ul>
    </div>
    <el-drawer ref="drawerRef" size="30%" v-model="dialog" title="个人信息" direction="rtl">
      <div class="demo-drawer__content">
        <el-form class="form" :model="form" label-width="120px">
          <!-- 头像上传 -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9090/file/upload/img"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              class="header-avatar"
              v-if="this.form.avatarUrl != null"
              :src="this.form.avatarUrl"
              :size="small"
            />
            <el-icon v-else>
              <img :src="imageUrl" class="bg-avatar" />
            </el-icon>
          </el-upload>

          <el-form-item label="账号">
            <el-input v-model="form.username" disabled autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio value="0" :label="0">男</el-radio>
              <el-radio value="1" :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="电话">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="地址">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="sumbit" type="primary" @click="onClick(this.form)">提交</el-button>
            <el-button class="cancel" type="warning" @click="dialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { update, getUserById } from "../../api/user/User.js";
export default {
  name: "CommonNav",
  data() {
    return {
      imageUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      userinfo: null,
      dialog: false,
      form: {}
    };
  },
  mounted() {
    this.form = JSON.parse(localStorage.getItem("userinfo"));
    if (this.form == null) {
      ElMessage({
        message: "请先登录账号",
        type: "error",
        duration: 3000
      });
      // 如果用户未登录，则跳回登陆页面
      return this.$router.push({
        path: "/"
      });
    }
    this.getUserInfo(this.form.id);
  },
  methods: {
    // 获取用户信息
    getUserInfo(id) {
      getUserById(id).then(res => {
        if (res.data.code == "200") {
          // 发送请求从数据库实时获取用户信息
          this.form = res.data.data;
          localStorage.setItem("userinfo", JSON.stringify(this.form));
        }
      });
    },
    // 退出登录
    exit() {
      // 清除浏览器缓存信息
      localStorage.removeItem("userinfo");
      return this.$router.push({
        path: "/"
      });
    },
    // 实时更换头像
    handleAvatarSuccess(res) {
      this.form.avatarUrl = res;
    },
    // 转到购物车
    goCart(){
      this.$router.push({
        path: '/shopping'
      })
    },
    // 修改个人信息
    onClick(form) {
      update(form)
        .then(res => {
          if (res.data.code == "200") {
            ElMessage({
              message: "修改成功",
              type: "success",
              duration: 3000
            });
          }
          // 更新浏览器信息
          localStorage.setItem("userinfo", JSON.stringify(form));
          // 获取更新后的信息
          this.form = JSON.parse(localStorage.getItem("userinfo"));
          // 关闭弹窗
          this.dialog = false;
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: black;
}
li {
  list-style: none;
}
.top-nav {
  width: 100%;
  height: 40px;
  background-color: #fe7500;
}
.top-nav-list {
  width: 1220px;
  height: 40px;
  margin: 0 auto;
}
.top-nav ul li {
  float: right;
  height: 40px;
  line-height: 40px;
  width: 80px;
}
.top-nav ul li a {
  color: aliceblue;
}
.top-nav-list ul li a:hover {
  transition: 0.3s;
  color: rgb(221, 225, 228);
}
.cancel {
  margin-top: 20px;
  width: 70px;
  height: 30px;
}
.sumbit {
  margin-top: 20px;
  width: 70px;
  height: 30px;
}
.form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 450px;
}
.header-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.bg-avatar {
  width: 70px;
  height: 70px;
}
</style>